<template>
  <div ref="target" class="ui-container">
    <img :src="getImagePath()" @click="handleMouseClick" class="ui-image">
   
    <!-- 控制按钮 -->
    <div class="control-panel">
      <button @click="toggleClickableAreas" class="toggle-btn">
        {{ showClickableAreas ? '隐藏点击区域' : '显示点击区域' }}
      </button>
    </div>
   
    <!-- 可点击区域覆盖层 -->
    <div v-if="showClickableAreas" class="clickable-overlay">
      <div
        v-for="area in getCurrentClickableAreas()"
        :key="area.id"
        class="clickable-area"
        :style="{
          left: area.x + 'px',
          top: area.y + 'px',
          width: area.width + 'px',
          height: area.height + 'px'
        }"
        :title="area.name"
      >
      </div>
    </div>
  </div>
</template>
 
<script>
//import { ref } from 'vue'
//import { useMouseInElement } from '@vueuse/core'

export default {
  name: 'ShowUI',
  methods: {
    getImagePath() {
      return this.imageUrl;
    },

    // 切换显示/隐藏可点击区域
    toggleClickableAreas() {
      this.showClickableAreas = !this.showClickableAreas;
      console.log('切换可点击区域显示状态:', this.showClickableAreas);
    },

    // 获取当前UI状态下的可点击区域
    getCurrentClickableAreas() {
      let areas = [];
     
      // 根据当前UI状态获取对应的可点击区域
      if (this.curMainUI === 0) {
        areas = this.clickableAreas[0] || [];
        // 根据当前子页面状态添加对应的按钮区域
        if (this.curChildUI === 1) {
          areas = [...areas, ...(this.clickableAreas['0_1'] || [])];
        }
        else if (this.curChildUI === 2) {
          areas = [...areas, ...(this.clickableAreas['0_2'] || [])];
        }
        else if (this.curChildUI === 3) {
          areas = [...areas, ...(this.clickableAreas['0_3'] || [])];
        }
      } else if (this.curMainUI === 1) {
        areas = this.clickableAreas[1] || [];
        // 如果是样本详细页面状态，添加样本子页面的按钮区域
        if (this.curChildUI === 1) {
          areas = [...areas, ...(this.clickableAreas['1_1'] || [])];
        }
        // 高级界面状态
        else if (this.curChildUI === 98) {
          areas = [...areas, ...(this.clickableAreas['1_1_98'] || [])];
        }
        // 导出界面状态
        else if (this.curChildUI === 99) {
          areas = [...areas, ...(this.clickableAreas['1_1_99'] || [])];
        }
      } else if (this.curMainUI === 2) {
        areas = this.clickableAreas[2] || [];
      } else if (this.curMainUI === 3) {
        areas = this.clickableAreas[3] || [];
        // 如果是系统总览子页面状态，添加试剂设置按钮
        if (this.curChildUI === 1) {
          areas = [...areas, ...(this.clickableAreas['3_3_1'] || [])];
        }
        // 如果是系统子菜单状态，添加Tab页面区域
        else if (this.curChildUI === 3) {
          areas = [...areas, ...(this.clickableAreas['3_tabs'] || [])];
        }
        // 如果是试剂设置界面状态，添加取消按钮
        else if (this.curChildUI === 99) {
          areas = [...areas, ...(this.clickableAreas['3_3_1_99'] || [])];
        }
      } else if (this.curMainUI === 4) {
        areas = this.clickableAreas[4] || [];
        // UI状态4总是显示设置Tab页面
        areas = [...areas, ...(this.clickableAreas['4_tabs'] || [])];
      }
     
      console.log(`当前UI状态: ${this.curMainUI}-${this.curChildUI}, 可点击区域数量: ${areas.length}`);
      return areas;
    },

    handleMouseClick(event) {
      /* 获取鼠标相对于页面的位置
       const pageX = event.pageX;
       const pageY = event.pageY;
       获取鼠标相对于容器的位置
       const clientX = event.clientX;
       const clientY = event.clientY;
       */
      const mouseX = event.offsetX;
      const mouseY = event.offsetY;
     
      if (this.curMainUI == 0) {
          console.log(mouseX, mouseY);
          if (this.curChildUI == 1) {
            if (mouseX > 425 && mouseX < 425 + 145 && mouseY > 672 && mouseY < 672 + 38 ) {
              console.log('切换页面');
              console.log(mouseX, mouseY);
              // 点击样本按钮，进入样本详细页面
              this.uiStr = "main_2.png";
              this.imageUrl = require('@/UI/' + this.uiStr);
              this.curChildUI = 2;
              console.log('进入第二页面');
            }
          }
          else if (this.curChildUI == 2) {
            if (mouseX > 612 && mouseX < 612 + 144 && mouseY > 671 && mouseY < 671 + 35) {
              console.log('切换页面');
              console.log(mouseX, mouseY);
              // 点击样本按钮，进入样本详细页面
              this.uiStr = "main_3.png";
              this.imageUrl = require('@/UI/' + this.uiStr);
              this.curChildUI = 3;
              console.log('进入第三页面');
            }
            else if (mouseX > 238 && mouseX < 238 + 144 && mouseY > 671 && mouseY < 671 + 35) {
              console.log('切换页面');
              console.log(mouseX, mouseY);
              // 点击样本按钮，进入样本详细页面
              this.uiStr = "main_1.png";
              this.imageUrl = require('@/UI/' + this.uiStr);
              this.curChildUI = 1;
              console.log('进入第一页面');
            }
          }
          else if (this.curChildUI == 3) {
            if (mouseX > 1320 && mouseX < 1320 + 30 && mouseY > 6 && mouseY < 6 + 30) {
              console.log('切换页面3');
              console.log(mouseX, mouseY);
              // 点击样本按钮，进入样本详细页面
              this.uiStr = "UI_1_1_0_0.png";
              this.imageUrl = require('@/UI/' + this.uiStr);
              this.curMainUI = 1
              this.curChildUI = 0;
              console.log('进入主页面');
            }
          }
      }
      else if (this.curMainUI == 1) {
        console.log('样本');
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40 && mouseY < 40 + 80) {
          console.log('切换样本详细页面');
          // 点击样本按钮，进入样本详细页面
          this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 1;
          console.log('进入样本详细页面');
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120  && mouseY < 120 + 80) {
          console.log('切换2');
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 200 && mouseY < 200 + 80) {
          console.log('切换3');
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 280 && mouseY < 280 + 80) {
          console.log('切换4');
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
          this.curChildUI = 0;
        }
        console.log(this.curChildUI);
        // 样本子页面按钮处理
        if (this.curMainUI == 1 && this.curChildUI == 1) {
          console.log('样本子页面');
          // 样本申请按钮
          if (mouseX > 80 && mouseX < 80 + 117 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击样本申请按钮');
            // 使用现有的UI图片模拟页面跳转
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 审核按钮
          else if (mouseX > 200 && mouseX < 200 + 89 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击审核按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 取消审核按钮
          else if (mouseX > 292 && mouseX < 292 + 117 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击取消审核按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 导出按钮
          else if (mouseX > 412 && mouseX < 412 + 89 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击导出按钮');
            this.uiStr = "导出.png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 99;
            this.curMainUI == 1;
          }
          // 刷新按钮
          else if (mouseX > 504 && mouseX < 504 + 89 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击刷新按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 修改样本编号按钮
          else if (mouseX > 596 && mouseX < 596 + 145 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击修改样本编号按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 编辑按钮
          else if (mouseX > 744 && mouseX < 744 + 89 && mouseY > 44 && mouseY < 44 + 32) {
            console.log('点击编辑按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          // 高级按钮
          else if (mouseX > 1275 && mouseX < 1275 + 89 && mouseY >  44 && mouseY <  44 + 32) {
            console.log('点击高级按钮');
            this.uiStr = "高级.png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 98;
          }
        }
        else if (this.curMainUI == 1 && this.curChildUI == 98) {
          console.log(mouseX);
          console.log(mouseY);
          console.log("高级界面");
          if (mouseX > 1165 && mouseX < 1165 + 158 && mouseY > 650 && mouseY < 650 + 30) {
            console.log('点击确定按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 1;
          }
          else if (mouseX > 1326 && mouseX < 1326 + 34 && mouseY > 114 && mouseY < 114 + 34) {
            console.log('点击X按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 1;
          }
        }
        else if (this.curMainUI == 1 && this.curChildUI == 99) {
          if (mouseX > 870 && mouseX < 870 + 95 && mouseY > 532 && mouseY < 532 + 31) {
            console.log('点击取消按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 1;
          }
          else if (mouseX > 963 && mouseX < 963 + 36 && mouseY > 138 && mouseY < 138 + 36) {
            console.log('点击X按钮');
            this.uiStr = "UI_" + 1 + "_" + 1 + "_" + 0 + "_" + 0 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
            this.curChildUI = 1;
          }
        }
      }
      else if (this.curMainUI == 2) {
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 425 && mouseY < 425 + 80) {
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 505 && mouseY < 505 + 80) {
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
        }
        // 二级菜单切换
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 208 && mouseY < 208 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 1 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 1;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 280 && mouseY < 280 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 2 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 352 && mouseY < 352 + 64) {
          this.uiStr = "UI_" + 2 + "_" + 2 + "_" + 3 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
        }
      }
      else if (this.curMainUI == 3) {
        console.log(mouseX);
        console.log(mouseY);
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
          this.curChildUI = 1;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120 && mouseY < 120 + 80) {
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 505 && mouseY < 505 + 80) {
          this.uiStr = "UI_" + 4 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 4;
          this.curChildUI = 0;
        }
        // 二级菜单切换
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 288 && mouseY < 288 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 1 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 1;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 360 && mouseY < 360 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 2 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 2;
        }
        else if (mouseX > 8 && mouseX < 8 + 64 && mouseY > 432 && mouseY < 432 + 64) {
          this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curChildUI = 3;
        }
        else {
          if (this.curChildUI == 1) {
            if (mouseX > 80 && mouseX < 80 + 120 && mouseY > 40  && mouseY < 40 + 40) {
              this.uiStr = "试剂设置.png";
              this.imageUrl = require('@/UI/' + this.uiStr);
              this.curChildUI = 99;
            }
          }
          else if (this.curChildUI == 99) {
              if (mouseX > 1000 && mouseX < 1000 + 98 && mouseY > 570  && mouseY < 570 + 31) {
                  this.uiStr = "UI_3_0_0_0.png";
                  this.imageUrl = require('@/UI/' + this.uiStr);
                  this.curChildUI = 1;
              }
              else if (mouseX > 975 && mouseX < 975 + 90 && mouseY > 90  && mouseY < 90 + 50) {
                  this.uiStr = "UI_3_0_0_0.png";
                  this.imageUrl = require('@/UI/' + this.uiStr);
                  this.curChildUI = 1;
              }
          }
          // 界面Tab切换
          else if (this.curChildUI == 3) {
            if (mouseX > 89 && mouseX < 89 + 102 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 1 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 191 && mouseX < 191 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_"
               + 3 + "_" + 3 + "_" + 2 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 311 && mouseX < 311 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 3 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
            else if (mouseX > 431 && mouseX < 431 + 120 && mouseY > 114  && mouseY < 114 + 33) {
              this.uiStr = "UI_" + 3 + "_" + 3 + "_" + 3 + "_" + 4 + ".png";
              this.imageUrl = require('@/UI/' + this.uiStr);
            }
          }
        }

      }
      else if (this.curMainUI == 4) {
        console.log({ mouseX, mouseY });
        // 主菜单切换
        if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 40  && mouseY < 40 + 80) {
          this.uiStr = "UI_" + 1 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 1;
          this.curChildUI = 1;
        }        
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 120 && mouseY < 120 + 80) {
          this.uiStr = "UI_" + 2 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 2;
          this.curChildUI = 0;
        }
        else if (mouseX > 0 && mouseX < 0 + 80 && mouseY > 200 && mouseY < 200 + 80) {
          this.uiStr = "UI_" + 3 + "_" + 0 + "_" + 0 + "_" + 0 + ".png";
          this.imageUrl = require('@/UI/' + this.uiStr);
          this.curMainUI = 3;
          this.curChildUI = 0;
        }
        // 二级菜单切换
        else {
          // 界面Tab切换
          if (mouseX > 89 && mouseX < 89 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 1 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 199 && mouseX < 199 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 2 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 529 && mouseX < 529 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 4 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 309 && mouseX < 309 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 5 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 639 && mouseX < 639 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 6 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 419 && mouseX < 419 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 7 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
          else if (mouseX > 859 && mouseX < 859 + 110 && mouseY > 89  && mouseY < 89 + 40) {
            this.uiStr = "UI_" + 4 + "_" + 4 + "_" + 1 + "_" + 8 + ".png";
            this.imageUrl = require('@/UI/' + this.uiStr);
          }
        }
         
      }
    }
  },
  data() {
    return {
      // imageUrl: require('@/assets/样本.png'),
      imageUrl: require('@/UI/main_1.png'),
      curMainUI: 0,
      curChildUI: 1,
      uiStr: "",
      showClickableAreas: false,
      // 所有可点击区域的定义（基于log.txt中的完整坐标信息）
      clickableAreas: {
        // UI状态0: 开始页面的三张图片切换
        0: [
          // 这里会根据当前子页面状态动态添加按钮
        ],
        
        // UI状态0_1: 第一张图片的按钮
        '0_1': [
          { id: 'next_0_1_1', name: '下一步', x: 425, y: 671, width: 144, height: 38 }
        ],
        
        // UI状态0_2: 第二张图片的按钮
        '0_2': [
          { id: 'prev_0_2_1', name: '上一页', x: 238, y: 671, width: 144, height: 38 },
          { id: 'next_0_2_2', name: '下一页', x: 612, y: 671, width: 144, height: 38 }
        ],
        
        // UI状态0_3: 第三张图片的按钮
        '0_3': [
          { id: 'close_0_3_1', name: '完成', x: 1324, y: 6, width: 30, height: 30 }
        ],
        
        // UI状态1: 样本页面
        1: [
          { id: 'samples_1_0_0_0', name: '样本', x: 0, y: 40, width: 80, height: 80 },
          { id: 'qc_1_2_0_0', name: '质控', x: 0, y: 120, width: 80, height: 80 },
          { id: 'system_1_3_0_0', name: '系统', x: 0, y: 200, width: 80, height: 80 },
          { id: 'set_1_4_0_0', name: '设置', x: 0, y: 280, width: 80, height: 80 }
        ],
       
        // UI状态1_1: 样本详细页面的按钮区域
        '1_1': [
          { id: 'export_1_1_1_4', name: '导出', x: 412, y: 44, width: 89, height: 32 },
          { id: 'advancedsearch_1_1_1_8', name: '高级', x: 1275, y: 44, width: 89, height: 32 },  
        ],
        
        // UI状态1_1_98: 高级界面的按钮区域
        '1_1_98': [
        { id: 'confirm_advanced_1_1_98_1', name: '确定', x: 1165, y: 650, width: 158, height: 30 },
        { id: 'close_advanced_1_1_98_2', name: 'X', x: 1326, y: 114, width: 34, height: 34 }
        ],
        
        // UI状态1_1_99: 导出界面的按钮区域
        '1_1_99': [
          { id: 'cancel_export_1_1_99_1', name: '取消', x: 870, y: 532, width: 95, height: 31 },
          { id: 'close_export_1_1_99_2', name: 'X', x: 963, y: 138, width: 36, height: 36 }
        ],
       
        // UI状态2: 质控页面
        2: [
          { id: 'samples_2_1_0_0', name: '样本', x: 0, y: 40, width: 80, height: 80 },
          { id: 'qc_2_0_0_0', name: '质控', x: 0, y: 120, width: 80, height: 80 },
          { id: 'system_2_3_0_0', name: '系统', x: 0, y: 425, width: 80, height: 80 },
          { id: 'set_2_4_0_0', name: '设置', x: 0, y: 505, width: 80, height: 80 },
          { id: 'qc_set_2_2_1_0', name: '质控设置', x: 8, y: 208, width: 64, height: 64 },
          { id: 'qc_graph_2_2_2_0', name: '质控图形', x: 8, y: 280, width: 64, height: 64 },
          { id: 'qc_list_2_2_3_0', name: '质控列表', x: 8, y: 352, width: 64, height: 64 }
        ],
       
        // UI状态3: 系统页面
        3: [
          { id: 'samples_3_1_0_0', name: '样本', x: 0, y: 40, width: 80, height: 80 },
          { id: 'qc_3_2_0_0', name: '质控', x: 0, y: 120, width: 80, height: 80 },
          { id: 'system_3_3_0_0', name: '系统', x: 0, y: 200, width: 80, height: 80 },
          { id: 'set_3_4_0_0', name: '设置', x: 0, y: 505, width: 80, height: 80 },
          { id: 'system_overview_3_3_1_0', name: '系统总览', x: 8, y: 288, width: 64, height: 64 },
          { id: 'maintain_3_3_2_0', name: '维护', x: 8, y: 360, width: 64, height: 64 },
          { id: 'log_3_3_3_0', name: '日志', x: 8, y: 432, width: 64, height: 64 }
        ],
        
        // UI状态3_3_1: 系统总览子页面的按钮区域
        '3_3_1': [
          { id: 'reagentset_3_3_1_0', name: '试剂设置', x: 80, y: 40, width: 120, height: 40 }
          ],
          
          // UI状态3_3_1_99: 试剂设置界面的按钮区域
          '3_3_1_99': [
            { id: 'cancel_reagent_3_3_1_99', name: '取消', x: 1000, y: 570, width: 98, height: 31 }
          ],
          
          // UI状态3的Tab页面
        '3_tabs': [
          { id: 'tab_all_3_3_1_1', name: '全部', x: 87, y: 112, width: 101, height: 32 },
          { id: 'tab_all_3_3_2_1', name: '全部', x: 188, y: 112, width: 121, height: 32 },
          { id: 'tab_all_3_3_2_1', name: '全部', x: 309, y: 112, width: 121, height: 32 },
          { id: 'tab_all_3_3_3_1', name: '全部', x: 430, y: 112, width: 121, height: 32}
        ],
       
        // UI状态4: 设置页面
        4: [
          { id: 'samples_4_1_0_0', name: '样本', x: 0, y: 40, width: 80, height: 80 },
          { id: 'qc_4_2_0_0', name: '质控', x: 0, y: 120, width: 80, height: 80 },
          { id: 'system_4_3_0_0', name: '系统', x: 0, y: 200, width: 80, height: 80 },
          { id: 'set_4_4_0_0', name: '设置', x: 0, y: 280, width: 80, height: 80 },
          { id: 'system_set_4_4_1_0', name: '系统设置', x: 8, y: 368, width: 64, height: 64 }
        ],
       
        // UI状态4的Tab页面
        '4_tabs': [
          { id: 'instrument_con_4_4_1_1', name: '仪器连接设置', x: 89, y: 89, width: 110, height: 40 },
          { id: 'user_mgmt_4_4_1_2', name: '用户管理', x: 199, y: 89, width: 110, height: 40 },
          { id: 'assist_set_4_4_1_4', name: '辅助设置', x: 529, y: 89, width: 110, height: 40 },
          { id: 'normal_set_4_4_1_5', name: '常规设置', x: 309, y: 89, width: 110, height: 40 },
          { id: 'reexam_set_4_4_1_6', name: '复检设置', x: 639, y: 89, width: 110, height: 40 },
          { id: 'param_set_4_4_1_7', name: '参数设置', x: 419, y: 89, width: 110, height: 40 },
          { id: 'data_dict_4_4_1_8', name: '数据字典', x: 859, y: 89, width: 110, height: 40 }
        ]
      }
    }
  },
}
</script>

<style scoped>
.ui-container {
  position: relative;
  display: inline-block;
}

.ui-image {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 1366px;
  min-height: 728px;
}

.control-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.toggle-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: normal;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.toggle-btn:hover {
  background-color: #0056b3;
}

.toggle-btn:active {
  transform: translateY(1px);
}

.clickable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.clickable-area {
  position: absolute;
  border: 2px solid #ff0000;
  background-color: rgba(255, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clickable-area:hover {
  background-color: rgba(255, 0, 0, 0.2);
  border-color: #cc0000;
  border-width: 3px;
}

/* 移除了文字标签相关的样式，只保留红色边框 */
</style>